<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="报工详情" width="1000px">
    <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
    <el-row>
      <div class="detailsTop">
        <span>报工登记详情单</span>
        <el-divider content-position="right">{{ ruleForm.reportNo }}</el-divider>
      </div>
      <div class="detailCont detailDialogFont threeDetailStyle">
        <ul>
          <li>
            <b>作业单号</b>
            <span>{{ ruleForm.reportNo }}</span>
          </li>
          <li>
            <b>排程单号</b>
            <span>{{ ruleForm.scheduleNo }}</span>
          </li>
          <li>
            <b>产成品</b>
            <span>{{ ruleForm.materialName }} {{ruleForm.materialCode ? '【' + ruleForm.materialCode + '】':''}}</span>
          </li>
          <li>
            <b>单位</b>
            <span>{{ ruleForm.unit }}</span>
          </li>
          <li>
            <b>任务数</b>
            <span>{{ ruleForm.taskNum }}</span>
          </li>
          <li>
            <b>完工数量</b>
            <span>{{ ruleForm.finishNum }}</span>
          </li>
          <li>
            <b>返工数</b>
            <span>{{ ruleForm.reworkNum }}</span>
          </li>
          <li>
            <b>废品数</b>
            <span>{{ ruleForm.badNum }}</span>
          </li>
          <li>
            <b>是否完工</b>
            <span>{{ ruleForm.isAllFinish === 1 ? '是':'否' }}</span>
          </li>
          <li>
            <b>作业车间</b>
            <span>{{ ruleForm.factoryName }}</span>
          </li>
          <li>
            <b>生产批号</b>
            <span>{{ ruleForm.proNo }}</span>
          </li>
          <li>
            <b>在检数</b>
            <span>{{ ruleForm.checkNum }}</span>
          </li>
        </ul>
      </div>
      <el-table class="tabOver" border :data="detailList" height="350px" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table height="220px" border style="width: calc(100% - 20px);margin: 10px;" :data="props.row.reportDetails">
              <el-table-column prop="userName" label="报工人" align="center" />
              <el-table-column prop="proDate" label="报工时间" width="200px" align="center" />
              <el-table-column prop="qualifiedNum" label="合格数" width="100px" align="center" />
              <el-table-column prop="reworkNum" label="返工数量" align="center" width="100px" />
              <el-table-column prop="badNum" label="废品数" width="100px" align="center" />
              <el-table-column prop="equipName" label="设备" width="200px" align="center" />
              <el-table-column prop="checkNum" label="在检数" align="center" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="工序" prop="procedureName">
          <template #default="{ row }">{{ row.procedureName }}</template>
        </el-table-column>
        <el-table-column label="生产加工物料" prop="materialName">
          <template #default="{ row }">{{ row.materialName }} {{row.materialCode ? '【' + row.materialCode + '】':''}}</template>
        </el-table-column>
        <el-table-column label="是否完工" prop="isFinish">
          <template #default="{ row }">{{ row.isFinish === 1 ? '是':'否' }}</template>
        </el-table-column>
      </el-table>
    </el-row>
    <bottom-font ref="bottomFont" :obj-name="userName ? userName : this.$store.getters.compInfo.userName" :obj-date="proDate ? proDate : ruleForm.createAt" />
  </el-dialog>
</template>
<script>
import bottomFont from '@/components/BottomFont'
export default {
  components: { bottomFont },
  props: {},
  data() {
    return {
      ruleForm: {},
      dialogVisible: false,
      detailList: [],
      proDate: '',
      userName: ''
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      this.ruleForm = row
      this.getDetail(row.id)
      this.dialogVisible = true
    },
    /* 编辑获取详情 */
    async getDetail(id) {
      const res = await this.$axios.get(`/pro/report/getReportDetail?id=${id}`)
      if (res.data.code === 200) {
        console.log(res.data.data)
        this.userName = res.data.data
          ? res.data.data[0].reportDetails[0].userName
          : ''
        this.proDate = res.data.data
          ? res.data.data[0].reportDetails[0].proDate
          : ''
        this.detailList = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
